<script setup lang="ts">
import { RouterView } from 'vue-router'
import PiniaPractice from '@/views/piniaPractice.vue'
import PiniaPractice2 from '@/views/piniaPractice2.vue'
// 我们导入pinia里面的方法后 可以在模块中直接使用
import { useCounterStore } from '@/stores/counter.ts'
import { useChannelStore } from '@/stores/channelPage.ts'
import { storeToRefs } from 'pinia'
// 我们这里注意一下 我们不用对导入的pinia对象做 解构 操作 不然会丢失响应式的特性
// 使用变量接收一下我们pinia导出的方法 将来直接使用这个变量来找到我们定义的方法
const CounterStore = useCounterStore()
// 演示解构操作带来的坑
// 如果直接解构会丢失响应式的特性
// const { count, msg } = CounterStore
// 我们处理一下解构的内容 让数据保留响应式的特性 使用storeToRefs函数 包裹我们的解构对象
const { count, msg } = storeToRefs(CounterStore)
// 这里说一下 我们只有解构属性的时候才需要使用storeToRefs函数
// 我们解构方法的时候 不需要使用这个函数 因为方法就是固定写好的 我们就是顶多调用一下。

// console.log(CounterStore) // 得到的是一个对象 在target里面可以看到我们定义的数据和方法


// 演示异步
// 我们导入pinia模块的时候记得声明变量接收它 然后我们使用这个变量
const ChannelStore = useChannelStore() // 使用变量接收这个方法
// 我们来尝试解构一下方法
// 从我们的保存的变量中解构出 我们仓库中保存数据的属性 因为是属性 所以需要使用storeToRefs来包装一下
const { channelList } = storeToRefs(ChannelStore)
const { getList } = ChannelStore // 从我们保存的变量中解构出我获取数据的方法
</script>

<template>
  <h1>App.vue根组件</h1>
  <!-- 我们直接使用不做处理的解构数据会丢失响应式 -->
  <!--  此时我们可以使用一个方法来修复这个错误 就是在解构的时候 使用storeToRefs方法 上面演示-->
  <p>解构后的count{{ count }}</p>
  <!--  我们对解构后的数据进行处理后 依然保持响应式的特性-->
  <p>解构后的msg{{ msg }}</p>
  <!--  <h1>App.vue根组件 &#45;&#45;{{ CounterStore.count }}</h1>-->
  <!--  <p>{{ CounterStore.msg }}</p>-->

  <p>{{ CounterStore.doubleCount }}</p>
  <p>{{ CounterStore.doubleCount }}</p>
  <piniaPractice></piniaPractice>
  <piniaPractice2></piniaPractice2>
  <hr>
  <button @click="getList">获取频道数据</button>
  <ul>
    <li v-for="item in channelList" :key="item.id">{{ item.name }}</li>

  </ul>
  <RouterView />
</template>

<style scoped></style>
